* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    cursor: pointer;
}

$custom-border-radius: 8px;

.all-backgrond {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("../../assets/R-C.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -11;
    opacity: 0.4;
}

.camelia-socket-page {
    // user-select: none;   
    position: relative;
    // width: 74.92em;
    width: 100%;
    height: 100vh;
    overflow: hidden;


    #header-btns-and-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 30px;
        width: 100%;

        #app-title {
            width: 300px;
            height: 100%;
            text-align: center;
        }

        #functions-btns {
            -webkit-app-region: no-drag;
            width: 150px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .el-icon {
                transition: transform 0.3s ease-in-out;

                &:hover {
                    transform: scale(1.1);
                }
            }
        }
    }

    .aside-snow-menus {
        position: absolute;
        width: 60px;
        height: 95.4vh;
        border-radius: $custom-border-radius;
        background-color: rgba(0, 0, 0, 0.1);
        // border: 1px solid darkblue;
    }

    #show-friend-list {
        position: absolute;
        margin: 0 60px;
        width: 240px;
        height: 95.4vh;
        // max-height: 96vh;
        // height: 95.5vh;
        overflow: hidden;
        border-radius: $custom-border-radius;
        // border: 1px solid darkcyan;
    }

    // 聊天内容
    #content-main {
        position: fixed;
        // width: 875px; // 这个默认无用
        height: 100%;
        width: 75%; // 这个有用
        color: green;
        transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
        overflow: hidden;
        margin: 0 300px;
        border-radius: $custom-border-radius;
        background-color: rgba(0, 0, 0, 0.1);



        #user-chat-area {
            height: 100%;

            // 自定义滚动条样式  第一个是：滚动条的整体
            ::-webkit-scrollbar {
                width: 5px;
                background-color: rgba(0, 0, 0, 0.3);
            }

            // 第二个是：滚动条的滑块
            ::-webkit-scrollbar-thumb {
                background-color: antiquewhite;
            }

            #header-menus {
                height: 40px;
                border-bottom: 1px solid rgba(0, 0, 0, 0.4);
                // border-radius: $custom-border-radius;

                #current-chat-info,
                #saying {
                    width: 200px;
                    height: 100%;
                    border-radius: $custom-border-radius;

                    p,
                    span {
                        display: block;
                        height: 100%;
                        width: 95px;
                        text-align: center;
                        line-height: 40px;
                        text-overflow: ellipsis;
                        text-wrap: nowrap;
                        overflow: hidden;
                    }
                }

                .user-info,
                .group-info {
                    display: flex;
                    width: 100%;
                    height: 100%;
                }

                .group-info {

                    p {
                        width: 200px !important;
                    }
                }

                #saying {
                    width: 400px;

                    p {
                        width: 100%;
                    }
                }
            }


            // #who-to-chat-with-content,
            // #send-message {
            //     border: 1px solid darkcyan;
            // }

            #who-to-chat-with-content {
                border-bottom: 1px solid rgba(0, 0, 0, 0.4);
                height: 520px;
                width: 100%;
                border-radius: $custom-border-radius;
            }

            #chat-send-message {
                border-radius: $custom-border-radius;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

                #chat-area {
                    // border: 1px solid green;
                    width: 100%;
                    // margin-top: 100px;
                    border-radius: $custom-border-radius;

                    #messages {
                        border-radius: $custom-border-radius;
                        position: relative;
                        height: 50px;
                        width: 100%;

                        #chat-content-area,
                        #tail-btns {
                            display: flex;
                            align-items: center;
                            justify-content: space-evenly;
                        }

                        #chat-content-area {
                            height: 50px;

                            #tail-btns {
                                width: 270px;
                                height: 40px;

                                .n-button {
                                    width: 40px;
                                    height: 35px;
                                }
                            }

                        }
                    }


                }

                textarea {
                    width: 100%;
                    height: 100%;
                    resize: none;
                    border: none; // 去除边框
                    // outline: none; // 去除焦点边框
                    border-radius: $custom-border-radius;
                }

                textarea::-webkit-scrollbar {
                    // width: 10px;
                    display: none; // 直接隐藏滚动条
                }

            }
        }

    }
}

// transition标签淡入淡出动画
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease-in-out;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}


.memberAtSelected {
    background-color: rgba(0, 0, 0, 0.1);
}


::v-deep .n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--active {
    color: green;
}

.n-tab-pane {
    height: 73vh;
}


.n-card {

    #text-info-items {
        display: flex;
        align-items: flex-start;
        justify-content: space-around;
        margin: 3px;
        height: 60px;
        transition: backgroundColor 0.3s ease-in-out;

        &:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }

        .common-text-info {
            height: 100%;
            width: 200px;
            max-width: 200px;

            .message-content {
                width: 142px;

                &>figcaption:nth-child(1) {
                    font-size: 16px;
                }
            }
        }

        #send-time {
            text-align: center;
            line-height: 30px;
            height: 100%;
            width: 100px;
        }
    }

    .n-image {
        float: left;
    }

    #file-info-items {
        height: auto;
        min-height: 60px;
        max-height: 100px;
        margin: 5px;
        transition: backgroundColor 0.3s ease-in-out;

        &:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }

        .message-content {

            &>div:nth-child(1) {
                height: 70px;
                width: 285px;
                display: flex;
                align-items: center;
                justify-content: center;

                figcaption {
                    font-size: 14px;
                    width: 100px;
                    height: 100%;
                    text-align: center;
                    overflow: hidden;
                }


                &>figcaption:nth-child(1),
                &>figcaption:nth-child(3) {
                    height: 100%;
                    // line-height: 65px;
                    text-align: center;
                    text-overflow: ellipsis;
                    text-wrap: wrap;
                    overflow: hidden;
                }

                img {
                    width: 80px;
                    height: 100%;
                    border-radius: 5px;
                    object-fit: cover;
                }
            }

            &>div:nth-child(2) {
                line-height: 50px;
                height: 60px;
            }

        }
    }
}



.n-drawer {
    #group-members-list {
        padding: 5px;
        border-bottom: 1px solid darkgray;


        #list {
            margin-top: 10px;
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;

            #member-list-items {
                margin: 3px;
                height: 100%;
                min-width: 50px;
                max-width: calc(25% - 20px);

                div {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    font-size: 10px;


                    span {
                        line-height: 30px;
                        width: 100%;
                        height: 30px;
                        text-overflow: ellipsis;
                        text-wrap: nowrap;
                        overflow: hidden;
                    }
                }
            }
        }
    }

    #group-basic-info {
        margin-top: 5px;
        border-bottom: 1px solid darkgray;
    }

    #group-footer-dispose-btns {
        div {
            margin: 3px;
            display: flex;
            align-items: center;
            justify-content: center;

            .n-button {
                width: 100%;
            }
        }
    }
}



